<template>
  <div class="all" ref="ActiveYear8">
    <div class="bg" v-if="reportEighthJson">
      <LImage class="img-bg" :src="Config.img('2201_bg.png')"></LImage>
      <div class="allab">
        <LImage class="img-stars" :src="Config.img('2201_stars.png')"></LImage>
      </div>
      <LImage class="img-moon" :src="Config.img('2201_moon.png')"></LImage>
      <LImage class="img-spot-right" :src="Config.img('2201_right_spot.png')"></LImage>
      <LImage class="img-log" :src="Config.img('2201_page8_logo.png')"></LImage>
      <LImage class="img-spot-left" :src="Config.img('2201_left_spot.png')"></LImage>
      
      <div class="height30"></div>
      <div class="height30"></div>
      <div class="row">
        <div class="all">
          <text class="font30 text-yellow">{{'热门币种:'}}</text>
          <div class="height20"></div>
          <div class="cell" v-for="(item, index) in reportEighthJson.fiveCoinArray" v-bind:key="'coin'+index">
            <text class="font32 text-yellow">{{'Top'+(index+1)+'：'}}</text>
            <text class="font30 text1">{{item.toUpperCase()}}</text>
          </div>
        </div>
        <div class="all">
          <text class="font30 text-yellow">{{'热门策略:'}}</text>
          <div class="height20"></div>
          <div class="cell" v-for="(item, index) in reportEighthJson.fiveStrategyArray" v-bind:key="'strategy'+index">
            <text class="font32 text-yellow">{{'Top'+(index+1)+'：'}}</text>
            <text class="font30 text1">{{item}}</text>
          </div>
        </div>
      </div>
      
      <div class="height40"></div>
      <text class="font30 text-yellow">{{'我就是有抱负，而且是一夜暴富！'}}</text>

      <div class="all"></div>
      <div class="but" @stopPropagation="stopPropagation" @click="otClick"></div>
    </div>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
  .cell {
    font-display: row;
    align-items: center;
    margin-bottom: 40px;
  }
  .richtext {
    background-color:rgba(0, 0, 0, 0)
  }
  .yinyue {
    position: absolute;
    right: 40;
    top: 40;
    width: 60px;
    height: 60px;
  }
  .text1 {
    color: #E5F3FF;
  }
  .bg {
    overflow: hidden;
    flex: 1;
    padding-left: 70px;
    padding-right: 70px;
  }
  .allab {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
  }
  .img-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .img-stars {
    width: 719px;
    height: 766px;
  }
  .img-moon {
    position: absolute;
    top: 20;
    right: -200px;
    width: 340px;
    height: 340px;
  }
  .img-spot-left {
    position: absolute;
    bottom: 380;
    left: 10;

    width: 88px;
    height: 93px;
  }
  .img-spot-right {
    position: absolute;
    bottom: 288;
    right: 0;
    
    width: 147px;
    height: 155px;
  }
  .img-log {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 750px;
    height: 760px;
  }
  .cell {
    flex-direction: row;
    margin-bottom: 20px;
  }
  .but {
    height: 160px;
  }
  .height100 {
    height: 100px;
  }
  .mb40 {
    margin-bottom: 40px;
  }
  .text-yellow {
    color: #F6CF54;
  }
</style>

<script>

//功能
import jconfig from "@/_js/config"; 

export default {

  props:{
    data:{
      type:Object,
      default:undefined,
    },
  },
  
  data() {
    return {
      Config: jconfig,
      data:undefined,
      reportEighthJson:undefined,
    }
  },

  /* reportEighthJson 8
    * 
    *   fiveCoinArray 币种数组
    *   fiveStrategyArray 策略数组
    *   "reportEighthJson":{
            "fiveCoinArray":[
                "btc",
                "eth",
                "dot",
                "sushi",
                "xrp"
            ],
            "fiveStrategyArray":[
                "网格交易",
                "合约网格",
                "海风马丁",
                "SMT合约",
                "合约DCA"
            ]
        },
    **/
  mounted(){
    var reportEighthJson = this.data.reportEighthJson;
    var coins;
    for (let index = 0; index < reportEighthJson.fiveCoinArray.length; index++) {
      var coin = reportEighthJson.fiveCoinArray[index];
      coins = coins ? (coins + '、' + coin.toUpperCase()) : coin.toUpperCase();
    }
    reportEighthJson.coins = coins;

    var strategys;
    for (let index = 0; index < reportEighthJson.fiveStrategyArray.length; index++) {
      var strategy = reportEighthJson.fiveStrategyArray[index];
      strategys = strategys ? (strategys + '、' + strategy) : strategy;
    }
    reportEighthJson.strategys = strategys;
    this.reportEighthJson = reportEighthJson;
    setTimeout(() => {
      this.stylek = 'rgba(0, 0, 0, 0)';
      this.$forceUpdate();
    }, 1000);
  },

  methods:{
    
    /******************** 手势*/
    stopPropagation(){
      return true;
    },

    /******************** 按钮*/
    //查看
    otClick() {
      this.$emit("ot", this.$refs.ActiveYear8, 9);
    },
  }
}
</script>
